<template>
	<view class="rcontent">
		<view class="rforms">
			<uni-forms ref="form" validateTrigger="blur" :model="formData" :label-width="80">
				<uni-group title="必要信息">
				    <uni-forms-item label="编码" required name="recordCode">
				    	<uni-easyinput type="text" v-model="formData.recordCode" placeholder="请输入球杆编码" />
				    </uni-forms-item>
					<uni-forms-item label="配图" required name="recordMainImgIds">
						<view class="imgcontent">
<!-- 							<image  class="rimg" src="../../static/c1.png" @click="imgAction(0)"></image> -->
							<image v-for="(item, index) in fileList" :key="item.attId" class="rimg" :src="item.url" @click="imgAction(index)"></image>
							<view class="uploader" @click="chose">
								<uni-icons type="plusempty" color="#2979ff" size="30"></uni-icons>
							</view>
						</view>
					</uni-forms-item>
				</uni-group>
				<uni-group title="其他信息" top="20">
				    <uni-forms-item label="品牌">
				    	<uni-easyinput type="text" v-model="formData.recordBrand" placeholder="请输入品牌" />
				    </uni-forms-item>
					<uni-forms-item label="重量(oz)">
						<uni-easyinput type="text" v-model="formData.recordWeight" placeholder="请输入重量" />
					</uni-forms-item>
					<uni-forms-item label="长度(cm)">
						<uni-easyinput type="text" v-model="formData.recordLength" placeholder="请输入长度" />
					</uni-forms-item>
					<uni-forms-item label="重心(cm)">
						<uni-easyinput type="text" v-model="formData.recordCenter" placeholder="请输入重心" />
					</uni-forms-item>
					<uni-forms-item label="杆头直径(mm)">
						<uni-easyinput type="text" v-model="formData.recordTopDiam" placeholder="请输入杆头直径" />
					</uni-forms-item>
					<uni-forms-item label="握把直径(mm)">
						<uni-easyinput type="text" v-model="formData.recordTailDiam" placeholder="请输入握把直径" />
					</uni-forms-item>
					<uni-forms-item label="描述">
						<uni-easyinput type="textarea" v-model="formData.recordText" placeholder="请输入描述" />
					</uni-forms-item>
				</uni-group>
			</uni-forms>
		</view>
		<view class="btns" @click="onSubmit">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	import { mupload } from '../../utils/mupload.js'
	import { ApiBase } from '../../utils/index.js'
	export default {
		data() {
			return {
				fileList : [],
				formData : {
					recordCode: "",
					recordBrand: "",
					recordWeight: "",
					recordLength: "",
					recordCenter: "",
					recordTopDiam: "",
					recordTailDiam: "",
					recordMainImgIds: [],
					recordText: ""
				},
				rules : {
					recordCode : {
						rules : [
							{
								required: true,
								errorMessage: "请填写球杆编码"
							}
						]
					},
					recordMainImgIds : {
						rules : [
							{
								required: true,
								errorMessage: "请上传球杆配图"
							},
							{
								validateFunction: (rule,value,data,callback) => {
									if(this.formData.recordMainImgIds.length === 0) {
										return false;
									} 
									return true;
								}
							}
						]
					}
				}
			}
		},
		onReady() {
				// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules);
		},
		mounted(){
			
		},
		methods: {
			
			previewOrDelete () {
				return new Promise(resolve => {
					uni.showActionSheet({
						title: "操作",
						itemList: ["预览", "删除"],
						success(ev) {
							if(ev.tapIndex === 0){
								resolve("1");
							} else if(ev.tapIndex === 1) {
								resolve("-1");
							} else {
								resolve("cancel");
							}
						},
						fail() {
							resolve("cancel");
						}
					});
				})
			},
			
			async imgAction (index) {
				const action = await this.previewOrDelete();
				if(action === "1"){
					uni.previewImage({
						current: index,
						urls: this.fileList.map(d => d.url),
						loop: true,
						indicator: "default"
					});
				} else if(action === "-1"){
					this.fileList.splice(index, 1);
					this.formData.recordMainImgIds = this.fileList.map(d => d.attId);
				} else {
					console.log("用户取消了操作");
				}
			},
			
			async chose () {
				const res = await mupload();
				if(!res.success) return;

				const fileList = res.data.map(d => {
					const data = d;
					this.formData.recordMainImgIds.push(data.attId);
					return {...data, url : ApiBase + data.url};
				});
				this.fileList.push(...fileList);
				console.log(this.fileList);
			},
			validate (){
				return new Promise(resolve => {
					this.$refs.form.validate().then(res=>{
									resolve(true);
								}).catch(err =>{
									resolve(false);
								})
				});
				
			},
			reset (){
				this.formData = {
					recordCode: "",
					recordBrand: "",
					recordWeight: "",
					recordLength: "",
					recordCenter: "",
					recordTopDiam: "",
					recordTailDiam: "",
					recordMainImgIds: [],
					recordText: ""
				};
				this.fileList = [];
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			},
			async onSubmit () {
				const valid = await this.validate();
				if(!valid) return;
				const data = {
					...this.formData,
					recordMainImgIds: this.fileList.map(d => d.attId)
				};
				uni.showLoading({
					title: "请稍候..."
				});
				uni.request({
					url: ApiBase + "/app-api/record",
					method: "POST",
					data: data,
					success: (res) => {
						uni.showModal({
							title: "提示",
							content: "验真数据录入成功",
							showCancel: false,
							complete: () => {
								this.reset();
							}
						});
					},
					fail: (ev) => {
						console.log("请求失败");
						console.log(ev);
					},
					complete() {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	
	.rcontent{
		height: 100%;
		overflow: hidden;
	}
	
	.rcontent .btns{
		height: 60px;
		background-color: #2979ff;
		color: #FFF;
		line-height: 60px;
		text-align: center;
	}
	
	.rcontent .rforms{
		height: calc(100% - 60px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	.rcontent .rforms .rcontent {
		
	}
	
	.rcontent .imgcontent{
		display: flex;
		flex-wrap: wrap;
	}
	
	.rcontent .imgcontent .rimg{
		width: 60px;
		height: 60px;
		border: 1px dashed #2979ff;
		border-radius: 4px;
		margin-right: 7px;
		margin-bottom: 7px;
	}
	
	.rcontent .imgcontent .uploader{
		width: 60px;
		height: 60px;
		border: 1px dashed #2979ff;
		border-radius: 4px;
		text-align: center;
		line-height: 60px;
		font-size: 30px;
	}
</style>
